<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case 实验版</title>
    <link rel="stylesheet" href="css/case css.css">
    <link rel="shortcut icon" href="picture/favicon.ico" />
</head>

<body>
    <a name="topx"></a>
    <!-- 1. 头部区域start -->
    <div class="header w">
        <div class="logo"><a href="#"><img src="picture/one2.png" alt="one"></a></div>

        <div class="nav">
            <ul>
                <li><a href="#">道具</a></li>
                <li><a href="#">武器</a></li>
                <li><a href="#">技能升级</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="输入关键词""><button></button>
        </div>
        <div class=" user">
            <img src="picture/sis.png" alt="sis">
            qq-sis
        </div>
    </div>
    <!-- 头部区域end -->
    <!-- 2. banner区域start -->
    <div class="banner">
        <div class="w">
            <!-- 侧导航栏区域 -->
            <div class="subnav">
                <ul>
                    <li><a href="#">第一替身 <span>&gt;</span></a></li>
                    <li><a href="#">第二替身 <span>&gt;</span></a></li>
                    <li><a href="#">第三替身 <span>&gt;</span></a></li>
                    <li><a href="#" style="text-decoration: line-through;">第&lt;四&gt;替身 <span>&gt;</span></a></li>
                    <li><a href="#">-数据删除- <span>&gt;</span></a></li>
                    <li><a href="#">瓦伦汀 <span>&gt;</span></a></li>
                    <li><a href="#">潘多拉亚克特 <span>&gt;</span></a></li>
                    <li><a href="#">咬尾蛇之环 <span>&gt;</span></a></li>
                    <li><a href="#">微风 <span>&gt;</span></a></li>
                </ul>
            </div>

            <!-- 课程区域 -->
            <div class="course">
                <h1>我的课程表</h1>
                <div class="bd">
                    <ul>
                        <li>
                            <h2>wowoowow</h2>
                            <p>kokodayo</p>
                        </li>
                        <li>
                            <h2>wowoowow</h2>
                            <p>kokodayo</p>
                        </li>
                        <li>
                            <h2>wowoowow</h2>
                            <p>kokodayo</p>
                        </li>
                    </ul>
                    <a href="#" class="more">全部课程</a>
                </div>
            </div>
        </div>
    </div>
    <!-- banner区域end -->
    <!-- 3. 精品推荐goods区域start -->
    <div class="goods w">
        <img src="picture/ak2.png" alt="虽然应该以下面核心区域定位，不过位置定位对了就行" class="ak2">
        <h2>精选课程</h2>
        <ul>
            <li><a href="#">坐姿矫正</a></li>
            <li><a href="#">体态恢复</a></li>
            <li><a href="#">集中课程</a></li>
            <li><a href="#">时间管理</a></li>
            <li><a href="#">自我调节</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- 精品推荐goods区域end -->
    <!-- 4. 精品推荐核心区域start -->
    <div class="box w">
        <div class="box-hd">
            <h2>精品推荐</h2>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <img src="picture/200px-家具_饰牌《魔咒》.png" alt="ctrl+shift+f 输入法简繁体切换">
                    <h4>输入法随便输入B-25B联系方式110 </h4>
                    <div class="info">
                        <span>高级</span> · 灰烬战线wiki
                    </div>
                </li>
                <li>
                    <img src="picture/200px-家具_饰牌《魔咒》.png" alt="ctrl+shift+f 输入法简繁体切换">
                    <h4>输入法随便输入B-25B联系方式110 </h4>
                    <div class="info">
                        <span>高级</span> · 灰烬战线wiki
                    </div>
                </li>
                <li>
                    <img src="picture/200px-家具_饰牌《魔咒》.png" alt="ctrl+shift+f 输入法简繁体切换">
                    <h4>输入法随便输入B-25B联系方式110 </h4>
                    <div class="info">
                        <span>高级</span> · 灰烬战线wiki
                    </div>
                </li>
                <li>
                    <img src="picture/200px-家具_饰牌《魔咒》.png" alt="ctrl+shift+f 输入法简繁体切换">
                    <h4>输入法随便输入B-25B联系方式110 </h4>
                    <div class="info">
                        <span>高级</span> · 灰烬战线wiki
                    </div>
                </li>
                <li class="rbox"><img src="picture/200px-家具_饰牌《魔咒》.png" alt="ctrl+shift+f 输入法简繁体切换">
                    <h4>输入法随便输入B-25B联系方式110 </h4>
                    <div class="info">
                        <span>高级</span> · 灰烬战线wiki
                    </div>
                </li>
                <li>
                    <img src="picture/200px-家具_饰牌《魔咒》.png" alt="ctrl+shift+f 输入法简繁体切换">
                    <h4>输入法随便输入B-25B联系方式110 </h4>
                    <div class="info">
                        <span>高级</span> · 灰烬战线wiki
                    </div>
                </li>
                <li>
                    <img src="picture/200px-家具_饰牌《魔咒》.png" alt="ctrl+shift+f 输入法简繁体切换">
                    <h4>输入法随便输入B-25B联系方式110 </h4>
                    <div class="info">
                        <span>高级</span> · 灰烬战线wiki
                    </div>
                </li>
                <li>
                    <img src="picture/200px-家具_饰牌《魔咒》.png" alt="ctrl+shift+f 输入法简繁体切换">
                    <h4>输入法随便输入B-25B联系方式110 </h4>
                    <div class="info">
                        <span>高级</span> · 灰烬战线wiki
                    </div>
                </li>
                <li>
                    <img src="picture/200px-家具_饰牌《魔咒》.png" alt="ctrl+shift+f 输入法简繁体切换">
                    <h4>输入法随便输入B-25B联系方式110 </h4>
                    <div class="info">
                        <span>高级</span> · 灰烬战线wiki
                    </div>
                </li>
                <li class="rbox"><img src="picture/200px-家具_饰牌《魔咒》.png" alt="ctrl+shift+f 输入法简繁体切换">
                    <h4>输入法随便输入B-25B联系方式110 </h4>
                    <div class="info">
                        <span>高级</span> · 灰烬战线wiki
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 精品推荐核心区域end -->
    <!-- 底部footer区域start -->
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="picture/one2.png" alt="">
                <p>
                    版权所有人<br>能加多少是多少
                </p>
                <a href="#" class="app">下载app</a>
            </div>
            <div class="links">
                <dl>
                    <dt>什么什么</dt>
                    <dd><a href="#">你能帮帮我吗</a></dd>
                    <dd><a href="#">那你帮帮我吧</a></dd>
                    <dd><a href="#">求你帮帮我吧</a></dd>
                </dl>
                <dl>
                    <dt>那个什么</dt>
                    <dd><a href="#">去百度啊</a></dd>
                    <dd><a href="#">去百度啊</a></dd>
                    <dd><a href="#">去百度啊</a></dd>
                </dl>
                <dl>
                    <dt>这个什么</dt>
                    <dd><a href="#">百度啊</a></dd>
                    <dd><a href="#">百度啊</a></dd>
                    <dd><a href="#">百度啊</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- 底部footer区域end -->
    <a href="#top" class="topx"><img src="picture/topx.png" alt=""></a>
</body>

</html>